<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <script src="exampel/Timetables.min.js"></script>
  <script src="vue/axios.min.js"></script>
  <script src="vue/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="./element-ui/lib/index.js"></script>
  <script src="vue/time.js"></script>
  <script src="vue/jquery-3.5.1.min.js"></script>
  <title>移动2002课表 v1.0</title>
  <style>
    #coursesTable {
      padding: 15px 10px;
    }
    
    .Courses-head {
      background-color: #edffff;
    }
    
    .Courses-head>div {
      text-align: center;
      font-size: 14px;
      line-height: 28px;
    }
    
    .left-hand-TextDom,
    .Courses-head {
      background-color: #f2f6f7;
    }
    
    .Courses-leftHand {
      background-color: #f2f6f7;
      font-size: 12px;
    }
    
    .Courses-leftHand .left-hand-index {
      color: #9c9c9c;
      margin-bottom: 4px !important;
    }
    
    .Courses-leftHand .left-hand-name {
      color: #666;
    }
    
    .Courses-leftHand p {
      text-align: center;
      font-weight: 900;
    }
    
    .Courses-head>div {
      border-left: none !important;
    }
    
    .Courses-leftHand>div {
      padding-top: 5px;
      border-bottom: 1px dashed rgb(219, 219, 219);
    }
    
    .Courses-leftHand>div:last-child {
      border-bottom: none !important;
    }
    
    .left-hand-TextDom,
    .Courses-head {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .Courses-content>ul {
      border-bottom: 1px dashed rgb(219, 219, 219);
      box-sizing: border-box;
    }
    
    .Courses-content>ul:last-child {
      border-bottom: none !important;
    }
    
    .highlight-week {
      color: #02a9f5 !important;
    }
    
    .Courses-content li {
      text-align: center;
      color: #666666;
      font-size: 14px;
      line-height: 50px;
    }
    
    .Courses-content li span {
      padding: 6px 2px;
      box-sizing: border-box;
      line-height: 18px;
      border-radius: 4px;
      white-space: normal;
      word-break: break-all;
      cursor: pointer;
    }
    
    .grid-active {
      z-index: 9999;
    }
    
    .grid-active span {
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .Courses-leftHand div {
      line-height: 45px;
    }
  </style>
</head>

<body>
  <div id="coursesTable" class="app" style="padding-top: 0;">
    <h1 style="text-align: center; font-size: 12px;">{{time | format('yyyy-MM-dd hh:mm:ss')}}</h1>
    <h2 style="font-size: 12px">今天是开学的第<span style="color: red">{{Day}}</span>天~第<span style="color: red">{{Week}}</span>周的<span style="color: red">星期{{WeekDay | convertDate}}</span></h2>
    <div style="text-align: center">
      <el-pagination layout="prev, pager, next" :total="total" pager-count="7" @current-change="handle" @prev-click="prevhandle" :current-page.sync="cur_page" @next-click="nexthandle">
      </el-pagination>
    </div>
    <p>当前课表是第{{cur_page}}周</p>
    <h1 v-if="isError" style="text-align: center; color: #ff0000">出现了点问题。。。 可能该周未更新，请联系管理员</h1>
  </div>
  <p style='text-align: center'>版权所有：<span style="color: red">移动2002-码农权</span></p>
  <p style="text-align: center"><a href="tel:17671241237">点我反馈bug</a></p>

  <script>
    Vue.filter('convertDate', (val)=> {
      switch (val) {
        case 1:
          return '一'; break;
        case 2:
          return '二'; break;
        case 3:
          return '三'; break;
        case 4:
          return '四'; break;
        case 5:
          return '五'; break;
        case 6:
          return '六'; break;
        case 7:
          return '日'; break;
      }
    });
    Vue.filter('format', (val, reg) => {
      return dateFormat(val, reg);
    });
    let vm = new Vue({
      el: '.app',
      data: {
        time: '',
        total: 200,
        cur_page: 1,
        week: 1,
        day: 1,
        cachetList: [],
        isError: false,
        startTime: new Date('2021/8/30'),
        nowTime: new Date(),
      },
      created() {
        // 首次加载 记录json缓存 this.resultList
        // let res = fetch('');
        // res.then((res)=>{
        //     res.json().then(res => console.log(res))
        // });
        // this.send('Course.json');
        // axios.get('Course.json').then(res => {
        //     this.cachetList = res.data;
        //     // 首次请求当前周
        //     let curWeek = Number.parseInt(this.getWeekOrDay(this.nowTime, 'Week'));
        //     // console.log(curWeek)
        //     this.render(curWeek);
        //     this.cur_page = curWeek;
        // });
        // 页面加载后 查看当前周 并且渲染
        let curWeek = Number.parseInt(this.getWeekOrDay(this.nowTime, 'Week'));
        this.cur_page = curWeek;
        this.send(this.cur_page);
      },
      mounted() {
        // DOM加载完毕 请求数据
        this.time = new Date();
        setInterval(() => {
          this.time = new Date();
          // this.nowTime = new Date();
        }, 1000);
      },
      computed: {
        Day() {
          return Number.parseInt(this.getWeekOrDay(this.nowTime, 'nowDay'));
        },
        Week() {
          console.log('1')
          return Number.parseInt(this.getWeekOrDay(this.nowTime, 'Week'));
        },
        WeekDay() {
          return Number.parseInt(this.getWeekOrDay(this.nowTime, 'WeekDay'));
        }
      },
      methods: {
        // render(id) {
        //     try{
        //         // 从缓存中拿数据并找到对应的周
        //         let {data} = this.cachetList.find(item => item.id == id);
        //         go(data);
        //         this.isError = false;
        //     }catch (err) {
        //         alert(`请联系码农权，可能该周课表未更新！ ${err}`);
        //         remove();
        //         this.isError = true;
        //         return
        //     }
        // },
        // 获取数据
        async send(id) {
          try {
            let res = await axios.get(`http://200rx58782.51vip.biz/${id}`);
            // console.log(res)
            let {
              course
            } = JSON.parse(res.data[0].course);
            console.log(course)
            go(course);
            this.isError = false;
          } catch (err) {
            alert(`请联系码农权，可能该周课表未更新！ ${err}`);
            remove();
            this.isError = true;
            return
          }
        },
        getWeekOrDay(nowTime, str) {
          if (str == 'nowDay') {
            return ((nowTime - this.startTime) / 1000 / 60 / 60 / 24) + 1;
          } else if (str == 'WeekDay') {
            return ((nowTime - this.startTime) / 1000 / 60 / 60 / 24 % 7) + 1;
          } else if (str == 'Week') {
            return ((nowTime - this.startTime) / 1000 / 60 / 60 / 24 / 7) + 1;
          }
        },
        handle(id) {
          console.log('变动了');
          // this.cur_page = id;
          this.isError = false;
          this.send(id);
        },
        // prevhandle&nexthandle 有bug 会发送两次请求
        prevhandle(id) {
          // this.isError = false;
          // this.cur_page = id;
          // this.send(id);
        },
        nexthandle(id) {
          // this.cur_page = id;
          // this.isError = false;
          // this.send(id);
        },
        // async send(path) {
        //     let res = await fetch(path);
        //     let result = await res.json();
        //     this.cachetList = result;
        //     // 首次请求当前周
        //     let curWeek = Number.parseInt(this.getWeekOrDay(this.nowTime, 'Week'));
        //     this.render(curWeek);
        //     this.cur_page = curWeek;
        // }
      }
    });
  </script>

  <script>
    function go(ResultCourseList) {
      remove();

      // 获取课表集合并渲染
      let courseList = ResultCourseList;
      // ResultCourseList.forEach(item => console.log(item));
      // courseList.forEach(item => console.log(item));
      // console.log(ResultCourseList.length == courseList.length)
      let week = window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] : ['一', '二', '三', '四', '五', '六', '日'];
      let day = new Date().getDay();
      let courseType = [
        [{
          index: '1',
          name: ''
        }, 1],
        [{
          index: '2',
          name: ''
        }, 1],
        [{
          index: '3',
          name: ''
        }, 1],
        [{
          index: '4',
          name: ''
        }, 1],
        [{
          index: '5',
          name: ''
        }, 1],
        [{
          index: '6',
          name: ''
        }, 1],
        [{
          index: '7',
          name: ''
        }, 1],
        [{
          index: '8',
          name: ''
        }, 1],
        [{
          index: '9',
          name: ''
        }, 1],
        [{
          index: '10',
          name: ''
        }, 1],
        [{
          index: '11',
          name: ''
        }, 1],
        [{
          index: '12',
          name: ''
        }, 1]
      ];
      // 实例化(初始化课表)
      let Timetable = new Timetables({
        el: '#coursesTable',
        timetables: courseList,
        week: week,
        timetableType: courseType,
        highlightWeek: day,
        gridOnClick: function(e) {
          alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
          console.log(e);
        },
        styles: {
          Gheight: 50
        }
      });
    }
    // 渲染json数据
    function remove() {
      $("#courseWrapper").remove();
    }
  </script>
</body>

</html>